<script lang="ts" setup>
// 菜单卡片组件
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import router from '../router';
import { userInfoStore } from '../assets/userStore/userStore';
import { MenuModel } from '../assets/models/Menu';
import { menuApis } from '../assets/apis/MenuApis';

// 定义响应式变量
let count = ref(0);
let price = ref(0);
const userStore = userInfoStore();
const props = defineProps({
    menu: {
        type: MenuModel
    }
});

// 数量改变的处理函数
const handleChange = (value: number) => {
    count.value = value;
    price.value = value * props.menu!.price;
}

// 删除商品的处理函数
const remove = (id: number) => {
    menuApis.deleteMenu(id, userStore.id)
        .then((value: boolean) => {
            if (value) {
                ElMessage.success('删除成功，请重新刷新页面');
            } else {
                ElMessage.error('删除失败');
            }
        })
}

// 提交订单的处理函数
const order = () => {
    router.push({
        path: "/order",
        query: {
            id: props.menu!.takeout.id,
            count: count.value,
            price: price.value!,
            menu: props.menu?.id,
            way: 1
        }
    })
}

onMounted(() => {
    count.value = props.menu!.count;
    price.value = props.menu!.price;
})
</script>

<template>
    <el-card shadow="hover">
        <el-row justify="center" align="middle">
            <el-col :span="3">
                <el-image :src="`${menu!.takeout.takeout_portrait}`"
                    style="width: 100%;border-radius: 50px;" />
            </el-col>
            <el-col :span="12" style="margin-left: 3%;">
                <el-row>
                    <el-col :span="24">
                        <el-text style="font-size: large;">{{ menu!.takeout.takeout_name }}</el-text>
                    </el-col>
                    <el-col :span="24" style="margin-top: 1%;margin-bottom: 2%;">
                        <el-text style="color: gray;font-size: small;">{{ menu!.takeout.introduce }}</el-text>
                    </el-col>
                    <el-col :span="24">
                        <el-input-number v-model="count" :min="0" @change="handleChange" size="small" />
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" style="margin-left: 1%;">
                <el-text style="width: 100%;text-align: end;color: red;font-size: larger;">¥ {{ price }}</el-text>
            </el-col>
            <el-col :span="4">
                <el-row>
                    <el-col :span="24">
                        <el-button type="danger" plain style="width: 100%;padding: 3%;"
                            @click="remove(menu?.id!)">删除外卖</el-button>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10%;">
                        <el-button type="success" plain style="width: 100%;padding: 3%;" @click="order">提交订单</el-button>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-card>
</template>

